import React, { useState, useEffect } from 'react';
import { Form, Modal, TreeSelect, Icon, message } from 'antd';
import LimitedTextArea from '../../../components/LimitedTextArea';
import { transferTask, getEmployeeList } from '../../../services/index';

import { FORM_DEFAULT_LAYOUT, MODAL_DEFAULT_PARAM, MODAL_FORCE_PARAM } from '../config';
import FileFormItem from './components/FileFormItem';

const TransferActionModal = ({ form, taskRecord, visible, setVisible, onOk }) => {
    const user = localStorage.getItem('user') ? JSON.parse(localStorage.getItem('user')) : {};
    // console.log('TransferActionModal -> taskRecord', taskRecord);
    const { id, auditEmployeeCode, acceptanceEmployeeCode } = taskRecord;
    const { getFieldDecorator, validateFields } = form;
    const [confirmLoading, setConfirmLoading] = useState(false);
    const [employeeList, setEmployeeList] = useState([]);
    const handleOk = () => {
        validateFields((err, values) => {
            if (err) {
                return;
            }
            const { executeEmployeeCode, operateReason, resourceRelation } = values;
            const files = resourceRelation && [resourceRelation.uploadResourceFile];
            setConfirmLoading(true);
            transferTask(id, files, executeEmployeeCode, operateReason)
                .then(res => {
                    const { code, msg } = res;
                    if (code !== 10000) {
                        message.error(msg || '操作失败~~~');
                        return;
                    }
                    if (onOk) {
                        onOk();
                    }
                    setVisible(false);
                })
                .finally(() => {
                    setConfirmLoading(false);
                });
        });
    };
    const fetchEmployeeList = async () => {
        const { companyId } = user;
        const result = await getEmployeeList(companyId);

        const { data, msg, code } = result;
        if (code === 10000) {
            const newData = data.map(item => ({
                ...item,
                value: item.employeeCode,
                title: item.employeeName
            }));
            setEmployeeList(newData);
        } else {
            message.error(msg || '获取人员信息失败~~~');
        }
    };
    useEffect(() => {
        if (!visible) return;
        fetchEmployeeList();
    }, [visible, user.companyId]);
    return (
        <Modal
            {...MODAL_DEFAULT_PARAM}
            title="转派"
            visible={visible}
            width={640}
            confirmLoading={confirmLoading}
            onOk={handleOk}
            destroyOnClose
            onCancel={() => setVisible(false)}
            {...MODAL_FORCE_PARAM}
        >
            <Form {...FORM_DEFAULT_LAYOUT} labelCol={{ span: 6 }}>
                <Form.Item label="执行人">
                    {/* <div className={styles.cyDiv}> */}
                    {getFieldDecorator('executeEmployeeCode', {
                        rules: [
                            {
                                required: true,
                                message: '请选择执行人'
                            },
                            {
                                validator(_, value, callback) {
                                    if (
                                        value === user.employeeCode ||
                                        value === auditEmployeeCode ||
                                        value === acceptanceEmployeeCode
                                    ) {
                                        return callback('不可选自己、当前任务审核人或验收人');
                                    }
                                    return callback();
                                }
                            }
                        ]
                    })(
                        <TreeSelect
                            suffixIcon={<Icon type="user" />}
                            showSearch
                            allowClear
                            dropdownStyle={{ maxHeight: 240, overflow: 'auto' }}
                            treeDefaultExpandAll
                            treeNodeFilterProp="title"
                            treeData={employeeList}
                            placeholder="请选择执行人"
                        ></TreeSelect>
                    )}

                    {/* </div> */}
                </Form.Item>
                <Form.Item label="原因">
                    {getFieldDecorator('operateReason', {
                        rules: [
                            {
                                required: true,
                                message: '请输入原因'
                            }
                        ]
                    })(<LimitedTextArea placeholder="请输入原因" maxLength={500} rows={6} />)}
                </Form.Item>
                <FileFormItem fieldName="resourceRelation" form={form}></FileFormItem>
            </Form>
        </Modal>
    );
};

export default Form.create()(TransferActionModal);
